<template>
  <div ref="mapContainer" id="map-container"></div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const mapContainer = ref(null);
let map:any = null;

onMounted(() => {
  // 设置 Mapbox Access Token 令牌 
  mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN;

  // 创建 Map 实例
  console.log(mapContainer.value);
  if (mapContainer.value) {
    map = new mapboxgl.Map({
      container: mapContainer.value, // 绑定的 DOM 容器
      style: import.meta.env.VITE_APP_MAPBOX_SATELLITE_STYLE_URL, // 卫星地图样式
      center: [120.1551, 30.2741], // 初始中心点经纬度（杭州）
      zoom: 10, // 初始缩放级别
    });
  }

  // 添加缩放和方向控制
  map.addControl(new mapboxgl.NavigationControl());
});

onBeforeUnmount(() => {
  // 销毁地图实例
  if (map) map.remove();
});
</script>

<style>
#map-container {
  width: 100%;
  height: 100vh;
}
</style>